<div class="row">
  <div class="col-md-4 col-xs-12">
    <sa-card title="添加公告">
      <form
        class="announcement-form"
        [formGroup]="editForm" 
        (ngSubmit)="submitEditForm(editForm.value)"
      >
        <div class="form-group" [ngClass]="controlStateClass(state)">
          <label for="announcement-type">
            <h5>公告状态</h5>
          </label>
          <select class="form-control c-select" id="announcement-type" [formControl]="state">
            <option [ngValue]="PublishState.Published">已发布</option>
            <option [ngValue]="PublishState.Draft">草稿</option>
          </select>
        </div>
        <div class="form-group" [ngClass]="controlStateClass(content)">
          <label for="announcement-content">
            <h5>公告内容</h5>
          </label>
          <sa-markdown-editor
            id="announcement-content"
            class="form-control announcement-content" 
            title="文章内容"
            [config]="{ lineWrapping: true }"
            [formControl]="content"
          >
          </sa-markdown-editor>
        </div>
        <hr>
        <div>
          <button
            type="submit"
            class="btn btn-success btn-with-icon submit-btn"
            [disabled]="!editForm.valid || isUpdating"
          >
            <ion-icon class="icon" name="checkmark-done"></ion-icon>
            <span>{{ activeAnnouncement ? '修改' : '添加' }}公告</span>
          </button>
          <button class="btn btn-default btn-with-icon" (click)="resetEditForm()">
            <ion-icon class="icon" name="refresh"></ion-icon>
            <span>重置</span>
          </button>
        </div>
      </form>
    </sa-card>
  </div>
  <div class="col-md-8 col-xs-12">
    <sa-card title="全部公告" baCardClass="with-scroll">
      <div class="clearfix">
        <div class="pull-left">
          <div class="btn-group">
            <button
              type="button"
              class="btn btn-default active"
              [ngClass]="{ 'active': isState(PublishState.All) }"
              [disabled]="isGetingList"
              (click)="switchState(PublishState.All)"
            >
              <span>全部</span>
              <span *ngIf="isState(PublishState.All)">&nbsp;({{ currentListTotal }})</span>
            </button>
            <button
              type="button"
              class="btn btn-default btn-with-icon"
              [ngClass]="{ 'active': isState(PublishState.Published) }"
              [disabled]="isGetingList"
              (click)="switchState(PublishState.Published)"
            >
              <ion-icon class="icon" name="checkmark-done"></ion-icon>
              <span>已发布</span>
              <span *ngIf="isState(PublishState.Published)">&nbsp;({{ currentListTotal }})</span>
            </button>
            <button
              type="button"
              class="btn btn-default btn-with-icon"
              [ngClass]="{ 'active': isState(PublishState.Draft) }"
              [disabled]="isGetingList"
              (click)="switchState(PublishState.Draft)"
            >
              <ion-icon class="icon" name="create"></ion-icon>
              <span>草稿</span>
              <span *ngIf="isState(PublishState.Draft)">&nbsp;({{ currentListTotal }})</span>
            </button>
          </div>
          <span>&nbsp;&nbsp;</span>
          <div class="btn-group" role="group">
            <button
              type="button" 
              class="btn btn-default btn-with-icon"
              [disabled]="isGetingList"
              (click)="refreshAnnouncements()"
            >
              <ion-icon class="icon" name="refresh"></ion-icon>
              <span>刷新</span>
            </button>
            <button
              type="button" 
              class="btn btn-default btn-with-icon"
              [disabled]="isGetingList"
              (click)="resetSearchForm()"
            >
              <ion-icon class="icon" name="remove-circle-outline"></ion-icon>
              <span>重置参数</span>
            </button>
            <div class="btn-group" dropdown [isDisabled]="!selectedAnnouncements.length || isGetingList">
              <button
                type="button"
                class="btn btn-default btn-with-icon dropdown-toggle"
                dropdownToggle
              >
                <ion-icon class="icon" name="list"></ion-icon>
                <span>批量操作</span>
              </button>
              <ul class="dropdown-menu" *dropdownMenu>
                <li class="dropdown-item">
                  <a [href]="" (click)="openBatchDelModal()">
                    <ion-icon class="icon" name="trash"></ion-icon>
                    <span>批量删除</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <form
          class="pull-right form-inline navbar-form announcement-search-form" 
          [formGroup]="searchForm" 
          (ngSubmit)="submitSearchForm()"
        >
          <div class="input-group" style="margin: 0">
            <input
              type="text"
              placeholder="公告内容"
              [formControl]="keyword"
              class="form-control with-default-addon"
            />
            <span class="input-group-append">
              <button class="btn btn-default" type="submit" [disabled]="!searchForm.valid">搜索</button>
            </span>
          </div>
        </form>
      </div>
      <div class="table-responsive">
        <div class="announcement-list">
          <sa-loading-spider [show]="isGetingList"></sa-loading-spider>
          <table class="table table-striped table-no-borders black-muted-bg table-enrich">
            <thead class="thead-inverse">
              <tr>
                <th class="batch-checkbox">
                  <sa-checkbox
                    [(ngModel)]="announcementsSelectAll"
                    (ngModelChange)="handleBatchSelectChange($event)"
                    [labelStrong]="true"
                    label="ID"
                  ></sa-checkbox>
                </th>
                <th width="40%">内容</th>
                <th width="180px" class="text-center">日期</th>
                <th width="100px">状态</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngIf="!announcements.data.length;else dataList">
                <td colspan="7">
                  <p class="text-muted text-center announcement-err-msg">
                    <span>{{ isGetingList ? '数据请求中...' : '暂无数据' }}</span>
                  <p>
                </td>
              </tr>
              <ng-template #dataList>
                <tr *ngFor="let announcement of announcements.data">
                  <td class="batch-checkbox">
                    <sa-checkbox
                      [(ngModel)]="announcement.selected"
                      (ngModelChange)="handleItemSelectChange()"
                      [label]="announcement.id"
                    >
                    </sa-checkbox>
                  </td>
                  <td>
                    <div class="content" [innerHTML]="parseMarkdown(announcement.content)"></div>
                  </td>
                  <td>{{ announcement.create_at | dataToLocale }}</td>
                  <td>
                    <ion-icon class="icon text-success" name="checkmark-done" *ngIf="announcement.state === PublishState.Published"></ion-icon>
                    <ion-icon class="icon text-warning" name="create" *ngIf="announcement.state === PublishState.Draft"></ion-icon>
                    <span>&nbsp;&nbsp;</span>
                    <span>{{ announcement.state === PublishState.Published ? '已发布' : '草稿' }}</span>
                  </td>
                  <td>
                    <div class="text-center">
                      <div class="btn-group" role="group">
                        <button
                          type="button"
                          class="btn btn-sm btn-warning btn-with-icon"
                          (click)="editAnnouncement(announcement)"
                        >
                          <ion-icon class="icon" name="create"></ion-icon>
                          <span>编辑</span>
                        </button>
                        <button
                          type="button"
                          class="btn btn-sm btn-danger btn-with-icon"
                          (click)="openDelModal(announcement)"
                        >
                          <ion-icon class="icon" name="trash"></ion-icon>
                          <span>删除</span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </tbody>
          </table>
          <br>
          <br>
          <div class="text-center" *ngIf="announcements.pagination">
            <pagination
              class="pagination-xs"
              firstText="首页"
              lastText="末页"
              nextText="下一页"
              previousText="上一页"
              pageBtnClass="btn-primary"
              [totalItems]="announcements.pagination.total"
              [itemsPerPage]="announcements.pagination.per_page"
              [(ngModel)]="announcements.pagination.current_page"
              [maxSize]="7"
              [boundaryLinks]="true"
              [rotate]="false"
              (pageChanged)="handlePageChanged($event)"
            ></pagination>
          </div>
        </div>
      </div>
    </sa-card>
  </div>
  <!-- 删除确认弹窗 -->
  <div bsModal #delModal="bs-modal" class="modal fade" tabindex="1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" aria-label="Close" (click)="canceldDelModal()">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">确认操作</h4>
        </div>
        <div class="modal-body">
          <div class="message">
            <span class="icon text-danger">
              <ion-icon class="icon" name="information-circle"></ion-icon>
            </span>
            <span>确定要删除{{ activeAnnouncement ? '这条' : '选中' }}公告吗？</span>
          </div>
        </div>
        <div class="modal-footer">
          <button
            class="btn btn-danger confirm-btn"
            (click)="(activeAnnouncement ? doDelAnnouncement() : doDelAnnouncements())"
          >确认删除</button>
          <span>&nbsp;&nbsp;</span>
          <button class="btn btn-default confirm-btn" (click)="canceldDelModal()">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>
